import React, { useState } from 'react';
import './Vip.css';
import TopBar from '../TopBar/TopBar';
import dec from '../../assets/img/dec.png';
import paydec from '../../assets/img/paydec.png';
import payone from '../../assets/img/payone.png';
import paytwo from '../../assets/img/paytwo.png';
import paythree from '../../assets/img/paythree.png';
import payfour from '../../assets/img/payfour.png';
import payfive from '../../assets/img/payfive.png';
import paysix from '../../assets/img/paysix.png';
import payeight from '../../assets/img/payeight.png';
import payseven from '../../assets/img/payseven.png';
import paynine from '../../assets/img/paynine.png';
import payten from '../../assets/img/payten.png';
import payeleven from '../../assets/img/payeleven.png';
import paytwive from '../../assets/img/paytwive.png';

export default function Vip(props) {
    const [priceCon, setpriceCon] = useState(0);
    function changeCon(index) {
        setpriceCon(index);
    }
    let list = [
        {
            oneicon: payone,
            twoicon: paytwo,
            onetips: "全场出版书",
            onetitle: "免费读",
            twotips: "部分网络小说",
            twotitle: "免费读"
        }, {
            oneicon: paythree,
            twoicon: payfour,
            onetips: "阅读时长",
            onetitle: "兑书币",
            twotips: "书架书籍",
            twotitle: "无上限"
        }, {
            oneicon: payfive,
            twoicon: paysix,
            onetips: "阅读器",
            onetitle: "免广告",
            twotips: "下载到本地",
            twotitle: "无上限"
        }, {
            oneicon: payseven,
            twoicon: payeight,
            onetips: "阅读器",
            onetitle: "专属字体",
            twotips: "阅读器",
            twotitle: "专属背景"
        }, {
            oneicon: paynine,
            twoicon: payten,
            onetips: "每月得",
            onetitle: "百元纸书券",
            twotips: "全场有声内容",
            twotitle: "免费听"
        }, {
            oneicon: payeleven,
            twoicon: paytwive,
            onetips: "福利场",
            onetitle: "活动特权",
            twotips: "每日一答",
            twotitle: "专属道具卡"
        }
    ]
    return (

        <div className={'Vipbox ' + (props.show ? "show" : "")}>
            <TopBar title="无限卡" back={props.hidevip} />
            <div className="topblankbox"></div>
            <div className="contentbox">
                <div className="free">
                    <h4>免费无限卡</h4>
                    <div className="freetips">
                        百万出版书免费读
                    </div>
                    <div className="decoration">
                        <img src={dec} alt="" />
                    </div>
                </div>
                <div className="pay">
                    <div className="toppaybox">
                        升级为付费无限卡·享更多特权
                        <div className="decoration">
                            <img src={paydec} alt="" />
                        </div>
                    </div>
                    <div className="bottompaybox">
                        {
                            list.map((ele, index) =>
                            (
                                <div key={index} className="bottompaybox-flexbox">
                                    <div className="bottompaybox-minbox">
                                        <div className="vipicon">
                                            <img src={ele.oneicon} alt="" />
                                        </div>
                                        <div className="vipcontent">
                                            <p>{ele.onetips}</p>
                                            <h5>{ele.onetitle}</h5>
                                        </div>
                                    </div>
                                    <div className="bottompaybox-minbox">
                                        <div className="vipicon">
                                            <img src={ele.twoicon} alt="" />
                                        </div>
                                        <div className="vipcontent">
                                            <p>{ele.twotips}</p>
                                            <h5>{ele.twotitle}</h5>
                                        </div>
                                    </div>
                                </div>
                            )
                            )
                        }

                    </div>
                </div>
                <div className="blankbox"></div>
                <div className="bottompay">
                    <div className="mouthvip">
                        <div className="mouthvipleft">
                            <h5>连续包月 19.00</h5>
                            <p>19元/月·自动续期可随时取消</p>
                        </div>
                        <div className="mouthvipright">
                            立即开通
                        </div>
                    </div>
                    <div className="price">
                        <div onClick={() => changeCon(0)} className={"priceminbox " + (priceCon === 0 ? "con" : "")}>
                            <div className="pricetitle">年卡</div>
                            <div className="pricedetail">168.00</div>
                            <div className="priceavg">14元/月</div>
                        </div>
                        <div onClick={() => changeCon(1)} className={"priceminbox " + (priceCon === 1 ? "con" : "")}>
                            <div className="pricetitle">季卡</div>
                            <div className="pricedetail">60.00</div>
                            <div className="priceavg">20元/月</div>
                        </div>
                        <div onClick={() => changeCon(2)} className={"priceminbox " + (priceCon === 2 ? "con" : "")}>
                            <div className="pricetitle">月卡</div>
                            <div className="pricedetail">30.00</div>
                            <div className="priceavg">30元/月</div>
                        </div>
                    </div>
                    <div className="pricetips">
                        确认购买后，将向您的iTunes账户收款。购买连续包月项目，将自动续订，iTunes账户会在到期前24小时内扣费。在此之前，您可以在系统「设置」→「 iTunes Store 与 App Store」 → 「Apple ID」里进行退订。隐私政策&会员服务协议
                    </div>
                </div>
            </div>
        </div>
    );
}
